<template>
  <div class="chord-table">
    <el-table :data="patterns">
      <el-table-column prop="label" label="名称"></el-table-column>

      <el-table-column v-for="rk in rootkeys" :key="rk" :label="rk.name">
        <template #default="scope">
          <el-button text @click="handleClickChord(rk, scope.row)">
            {{ formatChord(rk, scope.row) }}
          </el-button>
        </template>
      </el-table-column>

      <!-- <el-table-column label="音程"></el-table-column> -->
    </el-table>
  </div>
</template>

<script>
function cloneObject(o1) {
  let j = JSON.stringify(o1);
  return JSON.parse(j);
}

export default {
  name: "ChordTable",
  props: {
    msg: String,
  },

  data() {
    const rootkeys = [
      { name: "C" },
      { name: "C#" },
      { name: "D" },
      { name: "D#" },
      { name: "E" },
      { name: "F" },
      { name: "F#" },
      { name: "G" },
      { name: "G#" },
      { name: "A" },
      { name: "A#" },
      { name: "B" },
    ];
    return {
      rootkeys,
    };
  },

  computed: {
    patterns() {
      return this.$store.getters["chord/patterns"];
    },
  },

  methods: {
    handleClickChord(rootkey, pattern) {
      let chord = {
        name: "",
        label: "",
        root: "",
        steps: [],
      };
      chord = this.makeChord(rootkey, pattern);
      this.$emit("chord", chord);
    },

    makeChord(rootkey, pattern) {
      rootkey = cloneObject(rootkey);
      pattern = cloneObject(pattern);
      let c = {};
      c.name = this.formatChord(rootkey, pattern);
      c.label = pattern.label;
      c.steps = pattern.steps;
      c.root = rootkey.name;
      return c;
    },

    formatChord(rootkey, pattern) {
      let p1 = rootkey.name;
      let p2 = pattern.name;
      return p1 + "" + p2;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
